<template>
  <div>
    <!-- 顶部返回 -->
    <nav-bar title="店铺代理人" is-arrow isBackUp />
    <div class="express_list_warp">
      <div class="express">
        <div class="title">当前你所担任的店铺代理人</div>
        <template v-if="shopServerList.length > 0">
          <div class="list" v-for="item in shopServerList" :key="item.id">
            店铺名：{{ item.shopName }}
            <div class="state">
              <van-switch v-model="item.state" @click="changeState(item)" />
              <span>{{ item.state ? '服务中' : '暂停服务' }}</span>
            </div>
          </div>
        </template>
        <van-empty v-else description="还没有担任任何店铺代理人哦~" />
      </div>
    </div>
  </div>
</template>
<script>
import { upData, getData } from '@/api/api.js'

import NavBar from '@/components/common/NavBar.vue'

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      shopServerList: [],
      state: false,
    }
  },
  created() {
    this.getAgencyList()
  },
  methods: {
    //   获取用户代理的店铺列表
    async getAgencyList() {
      const res = await getData(
        '/customer/server/persion/find',
        {},
        { showLoading: true }
      )
      console.log(res)
      if (res.code === '0') {
        this.shopServerList = res.data.shopCustomerServerVos
        this.shopServerList.forEach((e) => {
          e.state = false
          if (e.sState === 1) {
            e.state = true
          }
        })
        return false
      }
      this.$handleCode.handleCode(res)
    },
    // 改变代理人状态
    async changeState(item) {
      // 0未服务1服务
      const sState = item.state ? 0 : 1
      const res = await upData(
        '/customer/server/persion/update',
        { sState, shopId: item.shopId },
        { showLoading: true }
      )
      console.log(res)
      if (res.code === '0') {
        this.getAgencyList()
        return false
      }
      this.$handleCode.handleCode(res)
    },
  },
}
</script>
<style lang="less" scoped>
.express_list_warp {
  padding-top: 1rem;
  box-sizing: border-box;
  background-color: #fff;
  .express {
    .title {
      font-weight: 900;
      text-align: center;
    }
    .list {
      color: #999;
      height: 2.8rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.5rem;
      .state {
        font-size: 0.9rem;
        color: coral;
        display: flex;
        align-items: center;
        span {
          margin-left: 0.5rem;
        }
      }
    }
    .list:nth-child(odd) {
      background-color: #fdf5e6;
    }
  }
}
</style>